/*
 * @Author: xiaosihan 
 * @Date: 2024-10-30 07:05:33 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-10-30 07:33:44
 */


import { autorun, toJS } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import styles from "./abnormalStatistics.module.less";
import RingChart3d from "@components/RingChart3d/RingChart3d";
import doubtfulSituationStore from "@views/DoubtfulSituation/doubtfulSituationStore";
import largeScreenApi from "@api/largeScreenApi";

interface Iprops {
    children?: ReactNode
}

// 异常统计
export default function AbnormalStatistics(props: Iprops) {

    const pieChartDom = useRef<HTMLDivElement | null>(null);
    const dom = useRef<HTMLDivElement | null>(null);
    const [data, setData] = useState({});
    const [lables, setLables] = useState<Array<{ name: string, color: string }>>([]);

    useEffect(() => {

    }, []);

    useEffect(() => {
        if (pieChartDom.current) {
            let ringChart3d = new RingChart3d(pieChartDom.current, 5);
            ringChart3d.lableType = 2;
            ringChart3d.camera.position.set(-1.05, 2.82, 6.97);
            ringChart3d.camera.lookAt(ringChart3d.scene.position);

            return autorun(async () => {
                // const data = toJS(doubtfulSituationStore.remoteRegulatoryData);
                // console.log(data);
                
                const res = await largeScreenApi.proportion_pie_chart() as any;
                // 设置数据
                ringChart3d.setData(
                    (res.list || []).sort((a: { risk_sco: number; }, b: { risk_sco: number; }) => b.risk_sco - a.risk_sco).map((d: any, i: number) => {
                        return {
                            name: d.model_name,
                            value: d.risk_sco,
                            onClick: () => { },
                            onMouseenter: () => {
                                ringChart3d.setHoverIndex(i);
                            },
                            onMouseleave: () => {
                                ringChart3d.setHoverIndex();
                            },
                            onMousemove: (e: any) => {

                            }
                        }
                    })
                );

                const lables = ringChart3d.getLables();

                setLables(lables);

            })
        }

    }, []);

    return (
        <div className={styles.abnormalStatistics}>
            <div className={styles.pieChart} ref={pieChartDom}>
            </div>
            <div className={styles.legend} >
                {
                    lables.map((lable, i) => {
                        return (
                            <span key={i} className={styles.legend_item} >
                                <span style={{ backgroundColor: lable.color }} className={styles.color_block} ></span>
                                {lable.name}
                            </span>
                        );
                    })
                }
            </div>
        </div>
    );

}